<template>
    <div class="agentBusiness">
        <el-dialog title="导出账单" :visible.sync="centerDialogVisible">
            <el-form :model="dateForm" :inline="true" ref="dateForm" class="dateForm">
                <el-form-item label="时间段" class="timeFrame">
                    <el-date-picker v-model="dateForm.timeDate" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd hh:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">                   
                    <el-button  @click="centerDialogVisible = false">开始导出</el-button>
                </span>
        </el-dialog>
        <div class="searchTop">
            <button class="export" @click="centerDialogVisible = true"><span>导出账单</span></button>
            <el-form :model="ruleForm" :inline="true" ref="ruleForm" class="myForm">
                <el-form-item label="项目名称" class="projectName condition">
                    <el-input v-model="ruleForm.projectName" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item class="btn condition">
                    <el-button @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="agentContent">
            <template>
                        <el-table
                        stripe
                          :data="tableData"
                         >
                         <el-table-column
                            prop="accountNum"
                            label="单号"
                            >
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="项目名称"
                            >
                          </el-table-column>
                          <el-table-column
                            sortable
                            prop="money"
                            label="应结金额"
                           >
                          </el-table-column>
                          <el-table-column
                            prop="date"
                            label="账单生成时间"
                            >
                          </el-table-column>
                          <el-table-column label="操作">
                            <template slot-scope="scope">
                            
                                <button @click="handleClick(scope.row)"><i class="icon iconfont icon-chakan"></i><span>查看</span> </button>
</template>
            </el-table-column>
             
            </el-table>
</template>
        </div>
    </div>
</template>
<script>
    export default {
        name: "accountStatement",
        data() {
            return {
                centerDialogVisible: false,
                ruleForm: {
                    projectName: ""
                },
                dateForm: {
                    timeDate: ''
                },
                tableData: [{
                    accountNum: '222',
                    date: '2016-05-02 00:00:00',
                    money: '454.44',
                    name: '王小虎',
                }, {
                    accountNum: '222',
                    date: '2016-05-04 00:00:00',
                    money: '33.44',
                    name: '王小虎',
                }, {
                    accountNum: '222',
                    date: '2016-05-01 00:00:00',
                    money: '22.44',
                    name: '王小虎',
                }, {
                    accountNum: '222',
                    date: '2016-05-03 00:00:00',
                    money: '67.44',
                    name: '王小虎',
                }]
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            handleClick(row) {
                console.log(row.money);
            }
        }
    }
</script>
<style lang="scss">
    .agentBusiness {
        width: 100%;
        position: relative;
        .el-dialog__wrapper {
            height: 100%;
            width: 100%;
            .el-dialog {
                position: absolute;
                width: 820px !important;
                height: 390px;
                box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
                border: solid 1px #bfbfbf;
                margin: auto !important;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                .el-dialog__header {
                    padding: 0;
                    height: 41px;
                    line-height: 41px;
                    border-bottom: 1px solid #bfbfbf;
                    .el-dialog__title {
                        font-family: "MicrosoftYaHei";
                        font-size: 14px;
                        color: #48697b;
                        margin-left: 20px;
                    }
                    .el-dialog__headerbtn {
                        top: 13px;
                    }
                }
                .el-dialog__body {
                    width: 100%;
                    padding: 0;
                    text-align: center;
                    margin-top: 100px;
                    .dateForm {
                        width: 100%;
                        .timeFrame {
                            .el-form-item__label {
                                line-height: 36px;
                                font-family: "MicrosoftYaHei";
                                font-size: 14px;
                                color: #6491aa;
                            }
                            .el-form-item__content {
                                line-height: 36px;
                                .el-date-editor {
                                    height: 36px;
                                    line-height: 36px;
                                    .el-input__icon{
                                        line-height: 30px;
                                    }
                                    .el-range-separator{
                                        line-height: 28px;
                                    }
                                }
                               
                            }
                        }
                    }
                }
                .el-dialog__footer {
                    text-align: center;
                    margin-top: 40px;
                    .el-button {
                        border: 0;
                        color: #ffffff;
                        font-family: "MicrosoftYaHei";
                        font-size: 14px;
                        background-color: #40dcbf;
                        border-radius: 4px;
                        width: 230px;
                        height: 40px;
                    }
                }
            }
        }
        .export {
            position: absolute;
            width: 130px;
            height: 34px;
            background-color: #78afcd;
            border-radius: 4px;
            font-family: 'MicrosoftYaHei';
            font-size: 14px;
            border: 0;
            outline: none;
            color: #ffffff;
            cursor: pointer;
            margin-left: 2%;
        }
        .searchTop {
            width: 100%;
            position: relative;
            top: 20px;
            .myForm {
                width: 100%;
                text-align: right;
                .condition {
                    .el-form-item__label {
                        line-height: 34px;
                        font-family: "MicrosoftYaHei";
                        font-size: 14px;
                        color: #6491aa;
                    }
                    .el-form-item__content {
                        line-height: 34px;
                        .el-input__inner {
                            height: 34px;
                            line-height: 34px;
                        }
                        .el-input__inner:focus {
                            border-color: #40dcbf;
                        }
                        .el-button {
                            background: #40dcbf;
                            border: 1px solid #40dcbf;
                            color: #ffffff;
                            padding: 8px 10px;
                        }
                    }
                }
                .projectName {
                    margin-right: 1.5%;
                    ;
                }
                .btn {
                    margin-right: 2%;
                    ;
                }
            }
        }
        .agentContent {
            position: relative;
            width: 96%;
            margin-left: 2%;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 0px 4px 4px 4px;
            margin-top: 16px;
            .el-table {
                width: 98%;
                margin-left: 1%;
                th.is-leaf {
                    border-bottom: 2px solid rgba(120, 175, 205, 0.5);
                    font-family: 'MicrosoftYaHei';
                    font-size: 14px;
                    font-weight: bold;
                    color: #48697b;
                }
                td {
                    border-bottom: 1px solid rgba(120, 175, 205, 0.2);
                    padding: 22px 0;
                    color: #48697b;
                    .cell {
                        button {
                            width: 78px;
                            height: 26px;
                            background-color: #ffffff;
                            border: solid 1px #aa89bd;
                            color: #aa89bd;
                            outline: none;
                            span {
                                margin-left: 4px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
